<div class="well">
    <a class="btn btn-success btn-lg btn-block" href="index.php?do=/textos/create" role="button">Agregar nuevo texto</a>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Busqueda</h3>
    </div>
    <div class="panel-body">
        <form class="form-inline" method="POST" role="form">
            <fieldset>
                <div class="form-group">
                    <label class="sr-only" for="ddlCarrera">Carrera</label>
                    <select id="ddlCarrera" name="ddlCarrera" class="form-control">
                        <option selected="selected" disabled="disabled">Carrera</option>
                        {combo_carreras}
                    </select>
                </div>
                <div class="form-group">
                    <label class="sr-only" for="ddlNivel">Materia</label>
                    <select id="ddlNivel" name="ddlNivel" class="form-control">
                        <option selected="selected" disabled="disabled">Niveles</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="sr-only" for="ddlMateria">Materia</label>
                    <select id="ddlMateria" name="ddlMateria" class="form-control">
                        <option selected="selected" disabled="disabled">Materia</option>
                    </select>
                </div>
                <div class="checkbox">
                    <label class="sr-only" for="txtTexto">Texto</label>
                    <input id="txtTexto" class="form-control" type="text" name="txtTexto" placeholder="Texto">
                </div>
                <button type="submit" name="btnFiltrar" class="btn btn-default">
                    <span class="glyphicon glyphicon-filter"></span> Filtrar
                </button>
            </fieldset>
        </form>
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Textos</h3>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Codigo</th>
                        <!-- <th>Carrera</th> -->
                        <th>Materia</th>
                        <th>Nombre</th>
                        <th>Autor</th>
                        <th>Paginas</th>
                        <!-- <th>Precio</th> -->
                        <th>Activo</th>
                        <th>Creado</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody id="tableContent">
                    {table_content}
                </tbody>
            </table>
            <div id="pnlPaginator" class="text-center"></div>
        </div>
    </div>
</div>
<script src="/public/js/jquery.bootpag.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('#pnlPaginator').bootpag({
        total: Math.ceil({paginator_total_pages} / 20),
        maxVisible: 5
    }).on("page", function(event, num) {
        $.ajax({
            url: "index.php?do=/textos/ajax_get_textos_table_content",
            type: "POST",
            data: {
                page: num,
                quantity: 20,
            },
            success: function(data, textStatus, jqXHR) {
                //console.debug(data);
                $("#tableContent").html(data); // some ajax content loading...
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(jqXHR, textStatus, errorThrown);
            }
        });
    });
    
    $('#ddlCarrera').change(function() {
        $.ajax({
            type: 'POST',
            url: 'index.php?do=/textos/ajax_get_niveles',
            data: 'idCarrera=' + $('#ddlCarrera').val(),
            success: function(data, textStatus, jqXHR) {
                console.debug(data);
        
                // Limpio los DDL foraneos.
                $('#ddlNivel').empty();
                $('#ddlNivel').append($('<option>').text('Niveles').attr('disabled', true));
                $('#ddlMateria').empty();
                $('#ddlMateria').append($('<option>').text('Materias').attr('disabled', true));

                // Parseo el JSON y agrego los datos en el DLL
                $.parseJSON(data).map(function(value, key) {
                    $('#ddlNivel').append($('<option>').val(value.IdNivel).text(value.Descripcion));
                });

                // Habilito el DDL hijo.
                $('#ddlNivel').removeAttr('disabled');

                // Coloco el indice por fuera del rango.
                $('#ddlNivel').prop('selectedIndex', 0);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('error');
            }
        });
    });
    
    $('#ddlNivel').change(function() {
        $.ajax({
            type: 'POST',
            url: 'index.php?do=/textos/ajax_get_materias',
            data: 'idNivel=' + $('#ddlNivel').val(),
            success: function(data, textStatus, jqXHR) {
                console.debug(data);
        
                // Limpio el DDL foraneo,
                $('#ddlMateria').empty();
                $('#ddlMateria').append($('<option>').text('Materias').attr('disabled', true));

                // Parseo el JSON y agrego los items al DDL.s
                $.parseJSON(data).map(function(value) {
                    $('#ddlMateria').append($('<option>').val(value.IdMateria).text(value.Descripcion));
                });

                // Habilito el DDL hijo.
                $('#ddlMateria').removeAttr('disabled');

                // Coloco el indice por fuera del rango.
                $('#ddlMateria').prop('selectedIndex', 0);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('error');
            }
        });
    });
</script>